import React from 'react';
import { Route, Link, Switch, useParams } from 'react-router-dom';


const Topic = (props) => {
    let { topicId } = useParams();
    return (
        <div><h2>{topicId}</h2></div>
    );
};


const Home = () => (<div><h2>Home</h2></div>);

function Topics (props) {
    let { url, path } = props.match;
    return (
        <div>
            <ul>
                <li><Link to={`${url}/rendering`}>rendering</Link></li>
                <li><Link to={`${url}/components`}>components</Link></li>
                <li><Link to={`${url}/props-v-state`}>props-v-state</Link></li>
            </ul>
            <Switch>
                <Route exact path={`${path}/:topicId`} component={Topic} />
            </Switch>
        </div>
    );
}

class App extends React.Component {
    render () {
        return (
            <div>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/topics">Topics</Link></li>
                </ul>
                {/* 不写 Switch: 包容性路由 */}
                <Switch>
                    {/* 排他性路由: 只能取其一 */}
                    <Route exact path="/" component={Home} />
                    <Route path="/topics" component={Topics} />
                </Switch>
            </div>
        );
    }
}

export default App;
